<template>
  <div>
    <van-nav-bar :border="false" fixed title="我的优惠" left-arrow @click-left="GOback" placeholder />
    <!-- Tab标签页 -->
    <van-tabs v-model="active" color="#3190e8" title-active-color="#3190e8">
      <!-- 左侧红包 -->
      <van-tab title="红包">
        <section class="hongbao_container">
          <!-- 头部红包说明 -->
          <header class="hongbao_title">
            <section class="total_number">
              有<span> 3 </span>个红包即将到期
            </section>
            <section class="hongbao_description">
              <img src="@/assets/img/details.png" alt="">
              <router-link to="/benefit/hbDescription">
                <span class="hongbao_detail" @click="$store.dispatch('freshmanContent1')">红包说明</span>
              </router-link>
            </section>
          </header>
          <!-- 红包列表 -->
          <ul v-if="envelopeData.length">
            <li class="hongbao_list_li" v-for="item in envelopeData" :key="item.id">
              <section class="list_item">
                <div class="list_item_left">
                  <span>¥</span>
                  <span>{{item.amount.toFixed(1)}}</span>
                  <p>{{item.description_map.sum_condition}}</p>
                </div>
                <div class="list_item_right">
                  <h4>{{item.name}}</h4>
                  <p>{{item.end_date}}到期</p>
                  <p>{{item.description_map.phone}}</p>
                </div>
                <div class="time_left">{{item.description_map.validity_delta}}</div>
              </section>
              <footer class="list_item_footer" v-if="item.limit_map">
                <p>{{item.limit_map.restaurant_flavor_ids}}</p>
              </footer>
            </li>
          </ul>
        </section>
        <!-- 历史红包 -->
        <div class="history_hongbao" @click="GethbHistory">
          <span class="check_history">查看历史红包</span>
          <van-icon name="arrow" color="#999" />
        </div>
      </van-tab>
      <footer class="hongbao_footer" v-if="!active">
        <div class="hongbao_style" @click="exchange">兑换红包</div>
        <div class="hongbao_style" @click="$router.push('/benefit/commend')">推荐有奖</div>
      </footer>
      <!-- 右侧商家代金卷 -->
      <van-tab title="商家代金券">
        <section class="hongbao_description voucher_header">
          <img src="@/assets/img/details.png" alt="">
          <router-link to="/benefit/coupon">
            <span class="hongbao_detail">商家代金券说明</span>
          </router-link>
        </section>
        <div class="unable_use">
          <img src="@/assets/img/daijingjuan.png" alt="">
          <p>无法使用代金券</p>
          <p>非客户端或客户端版本过低</p>
          <router-link to="/download" class="download_app">下载或升级客户端</router-link>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      //Tab标题页切换的索引值
      active: 0
    }
  },
  computed: {
    ...mapState(['envelopeData'])
  },
  methods: {
    GOback() {
      this.$router.go(-1)
    },
    // 跳转至过期红包
    GethbHistory() {
      this.$router.push('/benefit/hbHistory')
    },
    // 跳转至兑换红包
    exchange() {
      this.$router.push('/benefit/exchange')
    }
  },
  mounted() {
    this.$store.dispatch('getEnvelope', window.sessionStorage.getItem('user_id'))
  }
}
</script>

<style lang="less" scoped>
.hongbao_title {
  display: flex;
  justify-content: space-between;
  line-height: 2rem;
  .total_number {
    color: #666;
    span {
      color: #ff5340;
    }
  }
}
.hongbao_list_li {
  background-image: url('@/assets/img/hongbaobg.png');
}
.list_item_left span {
  color: #ff5340;
}

.time_left {
  font-size: 0.7rem;
  color: #ff5340;
}

.history_hongbao {
  padding: 0.5rem 0 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  .check_history {
    color: #999;
    margin-right: 0.2rem;
  }
}
.hongbao_footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  display: flex;
  .hongbao_style {
    flex: 1;
    line-height: 2rem;
    font-size: 0.65rem;
    color: #555;
    text-align: center;
  }
}
.hongbao_description {
  display: flex;
  align-items: center;
  img {
    width: 0.6rem;
    margin-right: 0.1rem;
  }
  .hongbao_detail {
    color: #3190e8;
  }
}
.voucher_header {
  justify-content: flex-end;
  line-height: 2rem;
  margin-right: 0.5rem;
}
.unable_use {
  text-align: center;
  margin-top: 4rem;
  img {
    width: 6rem;
    height: 3.4rem;
  }
  p:first-of-type {
    font-size: 0.6rem;
    color: #666;
    margin-top: 0.4rem;
  }
  p:nth-of-type(2) {
    color: #999;
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
  }
  .download_app {
    background-color: #56d176;
    font-size: 0.6rem;
    color: #fff;
    padding: 0.3rem;
    border-radius: 0.15rem;
  }
}
</style>